<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 用一个行列布局 -->
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 40px"
        >
          <el-col :span="20">
            <svg-icon
              name="qq"
              style="margin-right: 5px;"
            /><span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col :span="4">
            <el-row
              type="flex"
              justify="end"
            >
              <!-- 两个内容 -->
              <el-col :span="16">负责人</el-col>
              <!-- 下拉菜单 element -->
              <el-col :span="8">
                <!-- 下拉菜单 -->
                <el-dropdown>
                  <span class="el-dropdown-link">
                    操作
                    <i-ep-arrow-down style="vertical-align:middle;" />
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="hAdd('')">添加子部门</el-dropdown-item>
                      <el-dropdown-item>编辑子部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 放置一个el-tree组件 -->
        <el-tree
          :data="treeList"
          default-expand-all
        >
          <template #default="{data}">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px;"
            >
              <el-col :span="20">
                <svg-icon
                  name="qq"
                  style="margin-right: 5px;"
                /><span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row
                  type="flex"
                  justify="end"
                >
                  <!-- 两个内容 -->
                  <el-col :span="16">{{ data.manager }}</el-col>
                  <!-- 下拉菜单 element -->
                  <el-col :span="8">
                    <!-- 下拉菜单 -->
                    <el-dropdown>
                      <span class="el-dropdown-link">
                        操作
                        <i-ep-arrow-down style="vertical-align:middle;" />
                      </span>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item @click="hAdd(data.id)">添加子部门</el-dropdown-item>
                          <el-dropdown-item @click="hEdit(data.id)">编辑部门</el-dropdown-item>
                          <el-dropdown-item 
                            v-if="!data.children.length"
                            @click="hDel(data.id)"
                          >
                            删除部门
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>   
      <!-- 编辑弹框 -->
      <el-dialog
        v-model="showDialog"
        :title="isEdit?'编辑':'新增'"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        style="margin-top: 100px;"
        @close="deptDialog.resetForm()"
      >
        <DeptDialog
          :id="curId"
          ref="deptDialog"
          :is-edit="isEdit"
          :show-dialog="showDialog"
          :origin-list="originList"
          @success="hSuccess"
          @close="showDialog=false"
        ></DeptDialog>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import DeptDialog from './deptDialog/index.vue'
import { getDepartments ,delDepartment } from '@/api/departments'
import { transTreeData } from '@/utils/transTreeData'
//控制弹框
const showDialog=ref(false)
//控制是否编辑
const isEdit=ref(false)
//得到树形列表
const treeList=ref<Array<TreeObj>>()
const originList=ref<Origin[]>([])
const loadDepartments =async() => {
  try {
    const res = await getDepartments()
    console.log('获取树形列表',res)
    //删除第一个数据
    res.data.depts.shift()
    originList.value=res.data.depts.map(({ name,id ,code ,pid }:TreeObj) => { 
      return { name,id ,code,pid }
    })
    console.log('originList.value',originList.value)
    //转化为树形数据
    treeList.value=transTreeData(res.data.depts)
    console.log('treeList.value',treeList.value)
  } catch (error) {
    console.log(error)
  }
}
//初始化调用
loadDepartments()
//增加子部门
const curId=ref('')
const hAdd=(id:string) => {
  curId.value=id
  showDialog.value=true
  isEdit.value=false
}
//编辑部门
const deptDialog=ref()
const hEdit=(id:string) => {
  isEdit.value=true
  showDialog.value=true
  curId.value=id
  nextTick(() => {
    deptDialog.value.loadDepartmentsById()
  })
}
//删除部门
const hDel =async(id:string) => {
  try {
    await ElMessageBox.confirm('你确定删除吗?')
    const res = await delDepartment(id)
    console.log('hDel',res)
    loadDepartments()
  } catch (error) {
    console.log(error)
  }
}
//成功的回调函数
const hSuccess=() => {
  showDialog.value=false
  //重新渲染页面
  loadDepartments()
}
</script>

<style  lang="scss">
  .el-dialog__header{
    margin-right: 0;
  }
  .el-dialog__close {
    color: #174092 !important;
  }
  .el-tree-node__label{
    width: 100%;
  }

</style>
